By youngwax on

Some themes don't show the collapsible settings forms correctly. What is the secret for making a theme where the forms work?

Comments

filiptc’s picture

filiptc commented

Yeah, I'm looking for an answer to that too...

Can anyone help us out?

here’s picture

here commented

that makes three of us.

  <?php print $styles

?>

seems to be producing different code depending on the theme. Specifically, it does not include: 

   <script type="text/javascript" src="/content/misc/collapse.js"></script>
   <script type="text/javascript" src="/content/misc/textarea.js"></script>

in my custom theme. (Seperate question: where/why is $styles omitting these scripts in my theme but not others?)

However, even when I include that js manually, the collapsible form areas show up collapsed with the section title as plaintext (no link or ability to expand).

Where is the key to this?!.. I can't seem to make it work.

The code which is not working --


<div><fieldset class=" collapsible collapsed"><legend>General settings</legend>
<div class="form-item">
 <label for="edit-site_name">Name: <span class="form-required" title="This field is required.">*</span></label>
 <input type="text" maxlength="128" name="edit[site_name]" id="edit-site_name"  size="60" value="Santa Fe Farmers Market" class="form-text required" />
 <div class="description">The name of this web site.</div>
</div>
...
filiptc’s picture

filiptc commented

The problem I had was that I was calling a function from another script from the body tag in the page.tpl.php whitch was somehow interfering with the collapse.js script. I removed it and now the collapsible stuff actually does its job, just that I'd REALLY like to keep my fancy script (slowly changes the bgcolor of the page) without messing it up. Anyone heard of this one before? I honestly didn't take a deeper look, I guess I just chose the easy way removing it. Maybe some var interference...??

EDIT:
Actually, for future reference, this is the script I used for the color thing:

<head><SCRIPT LANGUAGE="JavaScript">

<!-- Hide from old browsers

var Color= new Array(20);
Color[1] = "14";
Color[2] = "13";
Color[3] = "12";
Color[4] = "11";
Color[5] = "10";
Color[6] = "0f";
Color[7] = "0e";
Color[8] = "0d";
Color[9] = "0c";
Color[10] = "0b";
Color[11] = "0a";
Color[12] = "09";
Color[13] = "08";
Color[14] = "07";
Color[15] = "06";
Color[16] = "05";
Color[17] = "04";
Color[18] = "03";
Color[19] = "02";
Color[20] = "01";
Color[21] = "00";

function fadeInGreen(where) {
if (where >= 1) {
document.bgColor="#14" + Color[where] + "00";   
where -= 1;
setTimeout("fadeInGreen("+where+")", 500);
} else {
setTimeout('fadeOutRed(1)', 150);
   }
}
function fadeOutRed(where) {
if (where <= 21) {
document.bgColor="#" + Color[where] +"1400";
where += 1;
setTimeout("fadeOutRed("+where+")", 500)
} else {
setTimeout("fadeInBlue(21)", 150);
   }
}
function fadeInBlue(where) {
if (where >= 1) {
document.bgColor="#0014" + Color[where];   
where -= 1;
setTimeout("fadeInBlue("+where+")", 500);
} else {
setTimeout('fadeOutGreen(1)', 150);
   }
}
function fadeOutGreen(where) {
if (where <= 21) {
document.bgColor="#00" + Color[where] +"14";
where += 1;
setTimeout("fadeOutGreen("+where+")", 500)
} else {
setTimeout("fadeInRed(21)", 150);
   }
}
function fadeInRed(where) {
if (where >= 1) {
document.bgColor="#" + Color[where] +"0014";   
where -= 1;
setTimeout("fadeInRed("+where+")", 500);
} else {
setTimeout('fadeOutBlue(1)', 150);
   }
}
function fadeOutBlue(where) {
if (where <= 21) {
document.bgColor="#1400" + Color[where];
where += 1;
setTimeout("fadeOutBlue("+where+")", 500)
} else {
setTimeout("fadeInGreen(21)", 150);
   }
}
// Unhide  -->
</SCRIPT>
</head>
<body <?php print theme("onload_attribute"); ?> bgcolor="#140000" onLoad="fadeInGreen(21)">
alynner’s picture

alynner commented

We don't have a script running, but we do have flash.

I have noticed in Firefox that the info bar says tranfering data, but the js script never seems to load. The script works when I switch to bluemarine theme, so I'm wondering if my flash file is preventing the download.

Any insights would be greatly appreciated.

alynner

alynner’s picture

alynner commented

I do have a script running (oops)... I am using macromedia scripts for rollovers and loading images. I solved it by putting the scripts in a js file and instead of using onload() in the body tag, I used this at the beginning of the js file:

if (isJsEnabled()) {
  addLoadEvent(function() {
    MM_preloadImages('image1.jpg','image2.jpg','image3.jpg');
  });
}

(I got this from http://drupal.org/node/72304#comment-113782)

I'm pretty sure it was the onload code sitting in the body tag that did it, because it also has php code which appears to call the onload scripts:

<body<?php print $onload_attributes; ?> >

filip_tc - this is likely your problem as well and if need be, you could put the bgcolor in a css file.

ekitel’s picture

ekitel commented

I'm having this problem where I can create a collapsible fieldset with markup, but I have a Javascript funciton that is supposed to create the same thing, with the same html code, but the js generated version is not collapsible, it displays as plain text, same problem as was described above earlier

so maybe this is some kind of javascript conflict, I wonder how to get around it....

alynner’s picture

alynner commented

perhaps instead of making more js code to do the same thing, just reference what is already been made in collapse.js?

ekitel’s picture

ekitel commented

I need to make more js to do something that collapse.js does not do, nor would it be expected to do what I want, which is to add extra fieldsets containing extra form fields to my form

alynner’s picture

alynner commented

Perhaps you need to look at the actual module, you can add more fields in the _form function and have it update the db in the _update or API function. I usually just do a search for 'insert' or 'create' to find out where it is updating the db. Rather than messing with the actual js file.

filiptc’s picture

filiptc commented

alynner wrote:

filip_tc - this is likely your problem as well and if need be, you could put the bgcolor in a css file.

Yeah, it was, however I now have another problem... I started a new thread here:
http://drupal.org/node/83522

Thx,
Phil

jackxwu’s picture

jackxwu commented

drupal_add_js('misc/collapse.js');

mfh’s picture

mfh commented

unfortunately, my page source already contains misc/collapse.js

also, the onload... thing did not work : that variable seems to be empty;

still unable to de-collapse... :-( !!

PS: in fact, in my case there IS something happening when I try to uncollapse :
the field gets about one pixel bigger, in very lucky cases
I can (sometimes) see just the uppermost row of pixels from the text that should appear ; then, if it's again the title od another collapsable field, i can make my way through...

kent007’s picture

kent007 commented

What folder can I find the file: user_profile.tpl.php? Do you mean page.tpl.php?
I'm new to Drupal and I too am having trouble adding a javascript call.

Thanks

kent007’s picture

kent007 commented

Hi,

I was able to solve my java insertion by adding it to the single page it was required for instead of adding it to the page template. No conflicts now and the 'contact us' popup window works fine.
Initially when I tried to have the java added to the template so it was available 'site wide' it caused problems with the edit page menus as described in other posts.

Now I have also solved the captcha problems I was having too. This is my first try at building a site with Drupal an I am pretty pleased with the results so far. http://www.clickbankaccountpro.com

Cheers,
Kent

EnekoAlonso-1’s picture

EnekoAlonso-1 commented

One thing I have found, while upgrading my theme from 4.7 to 5.1, is than apparently there is a new variable called $scripts.

I've copied this line from Drupal's new Garland theme, so my page.tpl.php looks like this:

  <head>
    <title><?php print $head_title ?></title>
    <?php print $head ?>
    <?php print $styles ?>
    <?php print $scripts ?>  <-- THIS IS THE NEW LINE
    ...

This should automatically include all JavaScripts files. In my case, this is the final code included:

<script type="text/javascript" src="/misc/jquery.js"></script>
<script type="text/javascript" src="/misc/drupal.js"></script>
<script type="text/javascript" src="/modules/custom/vote_up_down/ajax_vote_up_down.js"></script>
visible’s picture

visible commented

Brilliant! Thanks for the observation, saved me from a huge headache.

Once again, props.

g76’s picture

g76 commented

just a question. I am not a php wiz, so bear with me. I was wondering where to place the bottom set of code (script type= ...).

stella’s picture

stella commented

I have the same problem, but I'm not sure it's themes related. It has happened to me with garland, barlow and ocadia themes. The page for which it occurs most frequently for me is the modules list page. If I clear my cache and reload the page then the collapsible field sets work. They tend to appear a couple of seconds after the page finishes loading. However, if I reload the page again, without clearing my cache, then it stops working. The majority of the time I see no text at all - well I see the text (without the arrow) briefly as the page is loading but then it disappears.

It may be a Firefox issue - see #119724. Applying the patch from comment #35 in issue #104175 seems to have done the trick for me.

Stella

mfh’s picture

mfh commented

i think so too... I just noticed that the same pages work fine on my somewhat older Mozilla 1.7.8.1 / Gecko/20060926
while on Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.8.0.12) Gecko/20070510 Iceape/1.0.9 (Debian-1.0.9-0etch1)
they don't :-(

silurius’s picture

silurius commented

I've never touched this feature before so I have no idea how it became activated in the first place, but for me the issue was caused by the Firefox Web Developer Add-on's "Disable" button. Turning off the following ("Strict Warnings") did the trick:

http://i19.tinypic.com/6cfc26s.jpg

jumpfightgo@groups.drupal.org’s picture

jumpfightgo@groups.drupal.org commented

I don't think you can call drupal_add_js() in a theming file, but you can call it from a custom module. If you have some forms that are embedded in nodes, you can use the nodeapi like so to get drupal to load collapse.js (this is for drupal 6):

function MYMODULE_nodeapi(&$node, $op, $teaser = 0){
  switch($node->type){
    case 'page':
      drupal_add_js("misc/collapse.js");
      break; 
  }
}